import React , {Component} from "react";
import {Navigate,HashRouter,Routes,Route,BrowserRouter} from 'react-router-dom';
import Login from './pages/Login';
import NavPage from './pages/nav';
import {eventBus} from 'utils/eventBus.js';
const Home = React.lazy(() => import("./pages/Home"))
const ShopList = React.lazy(() => import("./pages/shop/ShopList"));
const AddShop = React.lazy(() => import("./pages/shop/AddShop"));
const AccountsList = React.lazy(() => import("./pages/accounts/AccountsList"));
const AddAccount = React.lazy(() => import("./pages/accounts/AddAccount"));
const NotFound = React.lazy(() => import("./pages/NotFound"));
const Upload = React.lazy(() => import("./pages/userCenter/UploadUser"));

const routes = [
  { path: "home", element: Home, roles: ["超级管理员"] },
  { path: "shopList", element: ShopList },
  { path: "addShop", element: AddShop, roles: ["超级管理员"] },
  { path: "accountsList", element: AccountsList },
  { path: "addAccount", element: AddAccount, roles: ["超级管理员"] },
  { path: "profile", element: Profile },
  { path: "*", element: NotFound },
]

export default class App extends Component{
	componentDidMount(){
		//类似于vue中的mounted
		eventBus..addListener("refreshRoutes", () => {
      this.forceUpdate();//强制刷新页面
    })
	}
	renderRoute =()=>{
		const userInfo = localStorage.userInfo;
		let arr = [];
		if (!userInfo) {
		  arr = routes;
		} else {
		  arr = filterData(routes, JSON.parse(userInfo).role)
		}
		
		console.log("arr", arr);
		return arr.map(item => {
		  const { element: Comp } = item;
		  return <Route key={item.path} path={item.path} element={<Comp />} />
		})
	}
	render(){
		return ( 
		<React.Suspense fallback={<div>加载中...</div>}>
		  <HashRouter>
		     <Routes>
		  		 <Route path='/' element={<Navigate to="/login" />} />
		  		 <Route path="/login" element={<Login />} />
		  		 <Route path="/nav" element={<NavPage />} >
		  		 {
					 this.renderRoute()
					 //<Route path="home" element={<Home />} />
		  		 //   <Route path="shopList" element={<ShopList />} />
		  		 //   <Route path="addShop" element={<AddShop />} />
		  		 //   <Route path="accountsList" element={<AccountsList />} />
		  		 //   <Route path="addAccount" element={<AddAccount />} />
				   // <Route path="upload" element={<Upload />} />
				   }
		  		 </Route>
				 <Route path="*" element={<NotFound />} />
				 </Routes>
		  </HashRouter>
		</React.Suspense>
		 
		  )
	}
}